<template>
  <div>
   <!-- 分割线 -->
   <el-divider></el-divider>
   <!-- 模糊查询表单 -->
   <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="鲜花名称">
    <el-input v-model="formInline.goodsName" placeholder="请输入鲜花关键字"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
<!-- 分割线 -->
<el-divider content-position="left">鲜花列表</el-divider>
 <!-- 鲜花列表显示 -->
 <div class="flower" >
   <Flower v-for="item in flowers" :key="item.gid" :shortTitle="item.shortTitle" 
   :mainPic="item.mainPic[item.mainPic.search(/http/g)]=='h'?item.mainPic:A.HYRJURL+'/'+item.mainPic" :originalPrice="item.originalPrice"
 @detail="flDetail(item.gid)"
>
   </Flower>
 </div> 
  </div>
</template>
<script>
import httpApi from '@/http';
import Flower from '../../components/Flower.vue';
import A from '@/http/BaseUrl'
 export default {
  components:{Flower},
    data() {
      return {
        flowers:[],
        A,
        formInline: {
          goodsName: ''
        }
      }
    },
    methods: {
      flDetail(gid){
        this.$router.push(`/home/flower-update/${gid}`)
        httpApi.MallApi.queryDetailByGid({gid}).then(res=>{
         //   console.log('then结果'+res);
           // console.log(res.data.data);
          })
       // console.log('detail:',gid);
      },
      listFlowers(){
       let params={page:1,pagesize:100}
        httpApi.MallApi.queryAll(params).then(res=>{
       //   console.log(res);
          this.flowers=res.data.data 
          //console.log(this.flowers[0].goodsName);
         //console.log(this.A.HYRJURL);
        })
      },
      queryFlowersByNameLike(){
       let params={goodsName:this.formInline.goodsName}
        httpApi.MallApi.queryByName(params).then(res=>{
         // console.log(res);
          // console.log(this.formInline.shortName);
         // console.log(res.data.data);
        //  console.log(res);
          this.flowers=res.data.data 
        })
      },
      onSubmit(){
        if(this.formInline.goodsName.trim()==''){
        this.listFlowers() //加载鲜花列表
      }else{
        this.queryFlowersByNameLike()
      }
      }
    },
    mounted(){
      this.listFlowers() //加载鲜花列表
 
  }
  }
</script>
<style scoped>
.flower{
  display: flex;
  flex-wrap: wrap;
}
</style>
